<template>
  <body class="poster">
  <div class="login-container">
    <div class="login_img">
      <img src="../common/img/timer.gif">
    </div>
    <el-form v-loading="loading" ref="ruleForm" class="login_form" :rules="rules" :model="ruleForm">
      <!--    <h3 class="login_title">欢迎登录</h3>-->

      <el-form-item label="" prop="username" style="margin-top: 30px">
        <el-input v-model="ruleForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="" prop="password" style="margin-top: 30px">
        <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-s-goods"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login('ruleForm')" type="primary">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
  </body>

</template>

<script>

//import axios from "axios";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      ruleForm: {},
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
          // {min: 5, max: 10, message: '长度5-10位', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 10, message: '长度5-10位', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.axios.post("/user/doLogin", this.ruleForm).then(resp => {
            if (resp.data.statusCode == 200) {
              this.$message({
                message: resp.data.message,
                type: 'success'
              });
              //保存user
              //sessionStorage.setItem("user",resp.data.data.user);
              //console.log(resp.data.data);
              //保存便签内容
              sessionStorage.setItem("noteContent", resp.data.data.user.stickyNotes);
              //保存token
              sessionStorage.setItem("tokenValue", resp.data.data.tokenInfo.tokenValue);
              sessionStorage.setItem("username", resp.data.data.user.username);
              sessionStorage.setItem("loginName", resp.data.data.user.realName);
              sessionStorage.setItem("userId",resp.data.data.user.id);
              //跳转到主页
              this.$router.replace("/main")
            }
            this.loading = false;
          })
        } else {
          this.$message.error("请输入数据！")
        }
      })

    }
  }
}
</script>

<style lang="scss" scoped>

.poster {
  background: url("../common/img/back2.gif") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}

body {
  margin: 0px;
  padding: 0;
}

.login-container {
  border-radius: 30px;
  background-clip: padding-box;
  margin: 120px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .login_form {
    margin-top: 100px;
  }
  .login_img {
    border-radius: 50%;
    border: 1px solid #eeeeee;
    width: 100px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin: -65px auto;
    background-color: #ffffff;
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #eeeeee;
    }
  }
}

//.login_title {
//  margin: 0px auto 10px auto;
//  text-align: center;
//  color: #505458;
//}

</style>
